Update dependency stylelint-config-cloudfour to v12 - #2548

v12.0.0

Compare Source

• Sass rules and the SCSS parser now only apply to .scss files (#​638)
  • .css files are now parsed as CSS, and get core rules that stylelint-config-standard-scss turns off, such as declaration-property-value-no-unknown, at-rule-prelude-no-invalid, media-query-no-invalid, and no-duplicate-selectors
  • at-rule-disallowed-list (@extend and @import) now only applies to .scss files
  • Added a stylelint-config-cloudfour/scss entry point, for applying the Sass rules to other file types, such as Vue components with <style lang="scss">
• Disabled the stylelint-scss formatting rules that conflict with Prettier, such as scss/operator-no-newline-after (#​638)
• order/order no longer sets the position of @include, because since Dart Sass 1.92, an @include's position decides which styles win. Variables and custom properties still come first, and declarations still come before nested rules (#​528)
• Enabled property-layout-mappings, unit-layout-mappings, and value-keyword-layout-mappings, which require logical properties, units, and keywords, such as margin-inline-start instead of margin-left (#​214)
  • Set languageOptions.directionality to left-to-right, top-to-bottom, so stylelint --fix can convert physical properties
  • overflow-x and overflow-y (#​662), and physical keywords in offset-anchor and offset-position (#​663), are still allowed, since browsers don't fully support their logical versions yet
• Added stylelint-config-standard as a direct dependency
• Updated the README's examples and links, which used rules removed in earlier Stylelint versions (#​661)

Migrating from v11

All projects: logical properties

This config now requires logical properties, so most projects will see many new warnings for properties like margin-left, width, and top. Stylelint can fix all of them automatically:

1. Run stylelint --fix on your styles. This converts physical properties, units, and keywords to their logical versions, such as margin-left to margin-inline-start, width to inline-size, and 100vw to 100vi.
2. Run stylelint --fix a second time. Renaming properties can put them out of alphabetical order, and the second run sorts them again.
3. Search your styles for writing-mode: vertical or writing-mode: sideways. On those elements, logical properties map to different sides, so inline-size sets the height, not the width. Check that they still look right, or keep the physical properties with a stylelint-disable comment.

If your build uses postcss-preset-env older than v8, or postcss-logical older than v6, check your compiled CSS after converting. These versions convert logical properties back to physical ones inside [dir="ltr"] and [dir="rtl"] selectors, so those styles only apply if your HTML has a dir attribute. To keep logical properties as written, turn that feature off:

postcssPresetEnv({
  features: {
    "logical-properties-and-values": false
  }
});

If your project uses a right-to-left or vertical writing direction, override languageOptions.directionality before running --fix, as described in the README. To keep using physical properties, turn off the three rules in your config.

Projects that lint CSS files

Your .css files were previously parsed as Sass, which turned off several of Stylelint's CSS validity rules. Those rules now run, so you may see new warnings after upgrading. Most of them point to real bugs, such as a unit on a unitless property (opacity: 0.5em), an invalid value (padding: auto), or a duplicated selector. Fix these in your CSS.

The Sass rules no longer run on .css files, so you can remove any overrides you added to work around them:

• Remove any rules that start with scss/, such as "scss/operator-no-newline-after": null.

• Remove any override of at-rule-disallowed-list. It used to ban @import in CSS files, but now only applies to Sass files.

• If you configured ignoreAtRules on scss/at-rule-no-unknown, move those options to the core at-rule-no-unknown rule instead:

  // Before
  "scss/at-rule-no-unknown": [true, { ignoreAtRules: ["define-mixin"] }],
  
  // After
  "at-rule-no-unknown": [true, { ignoreAtRules: ["define-mixin"] }],

  If your project also lints .scss files, set at-rule-no-unknown in an overrides entry for .css files instead. Setting it in your rules turns it back on for Sass files, where it reports @use and @include as unknown. See "Changing rules for one file type" in the README.

Projects that use PostCSS plugins

If your CSS uses syntax from PostCSS plugins, such as postcss-mixins or postcss-inline-svg, the newly enabled CSS rules may report that syntax as invalid. Add ignore options for the at-rules and functions your plugins provide. For example:

rules: {
  // @define-mixin and @mixin from postcss-mixins
  "at-rule-no-unknown": [true, { ignoreAtRules: ["define-mixin", "mixin"] }],
  "at-rule-prelude-no-invalid": [true, { ignoreAtRules: ["mixin"] }],
  // svg-load() from postcss-inline-svg, in any property
  "declaration-property-value-no-unknown": [
    true,
    { ignoreProperties: { "/.+/": "/svg-load\\(/" } },
  ],
}

Projects that lint Sass files

No config changes are required, but there are two differences to be aware of.

@include can now go anywhere in a rule, and stylelint --fix no longer moves it. Since Dart Sass 1.92, Sass outputs a mixin's styles where the @include is written, so its position decides which styles win:

.title {
  @include type.fluid; // the mixin's font sizes, including its media queries...
  font-size: 2rem; // ...are overridden by this
}

.title {
  font-size: 2rem; // this is overridden by...
  @include type.fluid; // ...the mixin's font sizes
}

Previous versions of this config required the first form, and --fix would move an @include above your declarations. If your project uses Sass 1.92 or later, that may have changed your compiled CSS. It's worth checking any @include whose mixin outputs declarations you also set yourself.

The stylelint-scss formatting rules that conflict with Prettier are now turned off. If you turned any of those off in your own config, you can remove those overrides:

• scss/at-else-closing-brace-newline-after
• scss/at-else-closing-brace-space-after
• scss/at-else-empty-line-before
• scss/at-else-if-parentheses-space-before
• scss/at-function-parentheses-space-before
• scss/at-if-closing-brace-newline-after
• scss/at-if-closing-brace-space-after
• scss/at-mixin-parentheses-space-before
• scss/dollar-variable-colon-space-after
• scss/dollar-variable-colon-space-before
• scss/operator-no-newline-after
• scss/operator-no-newline-before
• scss/operator-no-unspaced

Vue projects that use <style lang="scss">

Previously, Vue components got the Sass rules. Now they get the CSS rules by default, which report Sass features like @use and @include as unknown at-rules. To lint your components as Sass, apply the Sass config to .vue files:

{
  extends: ["stylelint-config-cloudfour"],
  overrides: [
    {
      files: ["**/*.vue"],
      extends: ["stylelint-config-cloudfour/scss"],
      customSyntax: "postcss-html",
    },
  ],
}

If your components mix Sass and plain CSS, see the README for the trade-offs.